<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/6/28 0028
  Time: 18:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>找回密码</title>
    <script src="${ctx}/assets/public_skin/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <style>
        .num_error{  right:0.5rem; top:0; color:#cb1448;}
    </style>
    <script type="text/javascript">
        $(function($) {
            var countdown=5;
            $("#getVerifyCode").click(function () {
                        var obj = $(this);
                        var phoneNum=$("#userPhone").val();
                        if (phoneNum==null|| phoneNum==""){
                            $("#user-name-label > .t_error").remove();
                            $("#userPwd-label > .t_error").remove();
                            $("#user-number-label > .num_error").remove();
                            $("#user-name-label").append('<span class="t_error">请输入手机号码</span>');
                        }else{
                            $.post(
                                    "${ctx}/checkPhoneNum",
                                    {
                                        "phoneNum":phoneNum
                                    },
                                    function(backdata){
                                        if (backdata=="yes"){
                                            var hasClick = $(obj).attr("hasclick");
                                            if(hasClick==1){
                                                countdown=60;
                                                $.ajax({
                                                    type: "GET",
                                                    url: "${ctx}/user/register_phone/"+phoneNum,
                                                    dataType:"JSON",
                                                    success: function(msg) {
                                                        if (msg == 0) {
                                                            $("#user-name-label > .t_error").remove();
                                                            $("#userPwd-label > .t_error").remove();
                                                            $("#user-number-label > .num_error").remove();
                                                            $("#msg").html("验证码发送成功");
                                                            settime(obj);
                                                        }
                                                    }
                                                });
                                            }
                                        }else  if (backdata=="no"){
                                            $("#user-name-label > .t_error").remove();
                                            $("#userPwd-label > .t_error").remove();
                                            $("#user-number-label > .num_error").remove();
                                            $("#user-name-label").append('<span class="t_error">该手机号码没注册</span>');
                                        }
                                    }
                            )
                        }

                    }
            );
            function settime(val) {
                if (countdown == 0) {
//                $(val).removeAttribute("disabled");
                    $(val).attr("hasclick","1");
                    $(val).text("获取验证码");
                } else {
                    $(val).attr("hasclick","0");
//                $(val).("disabled", true);
                    $(val).text("重新发送(" + countdown + ")");
                    countdown--;
                    setTimeout(function() {settime(val)},1000);
                }
            }
        });
        function checkUser() {
                var userPwd = document.getElementById("userPwd"); //获取密码框值
                var userPhone = document.getElementById("userPhone");  //获取手机框值
                var number = document.getElementById("number"); //获取验证码框值
                if (userPhone.value == null || userPhone.value == "") {
                    $("#user-name-label > .t_error").remove();
                    $("#userPwd-label > .t_error").remove();
                    $("#user-number-label > .num_error").remove();
                    $("#user-name-label").append('<span class="t_error">请输入手机号码</span>');
                    return false;
                } else {
                    var pattern = /^1[3|5|7|8|][0-9]{9}$/;
                    if (!pattern.test(userPhone.value)) {
                        $("#user-name-label > .t_error").remove();
                        $("#userPwd-label > .t_error").remove();
                        $("#user-number-label > .num_error").remove();
                        $("#user-name-label").append('<span class="t_error">手机号码格式不正确</span>');
                        return false;
                    }
                }
                if (userPwd.value == null || userPwd.value == "") {
                    $("#user-name-label > .t_error").remove();
                    $("#userPwd-label > .t_error").remove();
                    $("#user-number-label > .num_error").remove();
                    $("#userPwd-label").append('<span class="t_error">请输入新密码</span>');
                    return false;
                }
                if (number.value == null || number.value == "") {
                    $("#user-name-label > .t_error").remove();
                    $("#userPwd-label > .t_error").remove();
                    $("#user-number-label > .num_error").remove();
                    $("#user-number-label").append('<span class="num_error">请输入验证码</span>');
                    return false;
                } else {
                    if (number.value.length < 4) {
                        $("#user-name-label > .t_error").remove();
                        $("#userPwd-label > .t_error").remove();
                        $("#user-number-label > .num_error").remove();
                        $("#user-number-label").append('<span class="num_error">请输入正确的验证码</span>');
                        return false;
                    }
                    document.getElementById("password").submit();
                }

        }
    </script>
</head>
<body class=" b-ffffff">
<article class="viewports">
<form:form method="post" id="password" action="${ctx}/forget_password">
    <div class="p40 login_reg">
        <ul class="list_item2 odr3 r5 mt30">
            <li class="odr3_b" id="user-name-label">
                <i class="ico-30 ico_user"></i>
                <input class="i_text" type="text" maxlength="11" name="userPhone" id="userPhone" placeholder="微信账号/手机号">
            </li>
            <li class="" id="userPwd-label">
                <i class="ico-30 ico_password"></i>
                <input class="i_text" maxlength="16" name="userPwd" id="userPwd" type="password" value="" placeholder="新密码">
            </li>
        </ul>
        <div class="layout-box lh2 mt20">
            <div class="odr3 r5 plr20">

                <input class="i_text" type="text" maxlength="4" name="number" id="number" value="" placeholder="输入验证码">
            </div>
            <div class="box-col tar">
                <a id="getVerifyCode" class="c-33ccff" href="javascript:void(0)" hasclick="1">获取手机验证码</a>
            </div>
        </div>
         <span  id="user-number-label"></span>
        <c:if test="${errorType==1}">
            <span class="num_error">${error}</span>
        </c:if>
        <c:if test="${errorType==3}">
            <span class="num_error">${error}</span>
        </c:if>
        <div class="pt50">
            <button class="i_btn b-ffaa3b cf r5 lh2" type="button" onclick = "checkUser();">找回密码</button>
        </div>
    </div>
    </form:form>
</article>
</body>



<%--<div class="content-box">--%>
    <%--<form:form method="post" action="${ctx}/forget_password">--%>
        <%--<div class="list_item2 p25">--%>
            <%--<ul class="odr r5">--%>
                <%--<li class="odr_b" id="user-name-label">--%>
                    <%--<input placeholder="手机号" class="s_text" type="text" maxlength="11" name="userPhone" id="userPhone"/>--%>
                <%--</li>--%>
                <%--<li class="odr_b" id="user-number">--%>
                    <%--<input name="number" class="s_text" type="text" placeholder="请输入验证码" maxlength="4" id="number"/><a--%>
                        <%--name="getVerifyCode" class="hq_code r5" href="javascript:void(0)" hasclick="1">获取验证码</a>--%>
                    <%--<c:if test="${errorType==1}">--%>
                        <%--<span class="t_msg" style="margin-right:150px;">${error}</span>--%>
                    <%--</c:if>--%>
                    <%--<c:if test="${errorType==3}">--%>
                        <%--<span class="t_msg" style="margin-right:150px;">${error}</span>--%>
                    <%--</c:if>--%>
                <%--</li>--%>
                <%--<li class="odr_b" id="userPwd-label">--%>
                    <%--<input placeholder="请输入6位数以上密码" maxlength="16" class="s_text" type="password" name="userPwd" id="userPwd"/>--%>
                <%--</li>--%>
                <%--<li class="odr_b" id="rePassword-label">--%>
                    <%--<input placeholder="请重新输入新密码" maxlength="16" class="s_text" type="password" name="rePassword" id="rePassword"/>--%>
                    <%--<c:if test="${errorType==2}">--%>
                        <%--<span class="t_msg">${error}</span>--%>
                    <%--</c:if>--%>
                <%--</li>--%>
            <%--</ul>--%>
        <%--</div>--%>
        <%--<div class="plr25 pb25 c"><input class="news_btn r5 fs32" type="submit" value="提交"></input></div>--%>
        <%--<div  align="center" ><a  href="${cty}/login">已有账号？立即登录</a></div>--%>
    <%--</form:form>--%>
<%--</div>--%>
<%--</body>--%>
</html>
